<template>
  <div>
    <div v-if="props.isIcon">
      <el-icon :size="22" v-if="!globalStore.isDark" @click="changeDark"><Sunny /></el-icon>
      <el-icon :size="22" v-if="globalStore.isDark" @click="changeDark"><Moon /></el-icon>
    </div>
    <div v-else>
      <el-switch v-model="globalStore.isDark" inline-prompt :active-icon="Sunny" :inactive-icon="Moon" @change="switchDark" />
    </div>
  </div>
</template>

<script setup lang="ts" name="SwitchDark">
import { defineProps} from "vue";
import { useTheme } from "@/hooks/useTheme";
import { useGlobalStore } from "@/stores/modules/global";
import { Moon, Sunny } from "@element-plus/icons-vue";
const { switchDark } = useTheme();
const props = defineProps({
  isIcon: {
    type: Boolean,
    default: false
  }
});
const changeDark = () => {
  globalStore.isDark = !globalStore.isDark;
  switchDark();
};
const globalStore = useGlobalStore();
</script>
